<template>
	<view class="content">
		<view class="form">
			<uni-forms :modelValue="formData" :label-width="130">
				<uni-forms-item name="name" label="开票金额">
					<view class="text-right color-icon">￥2600</view>
				</uni-forms-item>
				<uni-forms-item name="name" label="抬头类型">
					<view class="text-right">
						<image :src="$imgUrl + '/personal/radio-icon.png'" class="radios-image" mode=""></image>个人
					</view>
				</uni-forms-item>
				<uni-forms-item name="name" label="发票抬头">
					<input type="text" v-model="formData.type" placeholder="请输入发票抬头" />
				</uni-forms-item>
				<view class="email-label">接收方式</view>
				<uni-forms-item name="name" label="邮箱">
					<input type="text" v-model="formData.email" placeholder="请输入接收电子发票邮箱" />
				</uni-forms-item>
			</uni-forms>
			<button class="submit btn-primary" @click="submit">提交申请</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {reactive} from 'vue'
	
	const formData = reactive({
		type: '',
		email: ''
	})
	const submit = () => {
		console.log(formData)
	}
</script>
<style lang="scss" scoped>
.content{
	.form{
		.uni-forms-item{
			border-bottom: 2rpx solid #f5f5f5;
			background: #fff;
			align-items: center;
			padding: 24rpx 32rpx;
			margin: 0;
			&:last-child{
				border: none;
			}
			uni-input{
				font-size: 28rpx;
			}
			::v-deep.uni-input-wrapper{
				text-align: right;
			}
			::v-deep.uni-forms-item__label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}
			.radios-image{
				width: 36rpx;
				height: 36rpx;
				margin-right: 9rpx;
			}
			.text-right{
				justify-content: right;
				display: flex;
				align-items: center;
				font-size: 32rpx;
			}
			.color-icon{
				color: rgba(253, 150, 24, 1);
				font-weight: bold;
			}
		}
		.email-label{
			padding: 40rpx 32rpx 20rpx 32rpx;
		}
		.submit{
			width: 686rpx;
			margin:472rpx 32rpx 40rpx 32rpx ;
		}
	}
}
</style>
